Об'єкти семплерів WebGL: детальний контроль над фільтрацією та режимами повторення текстур

У WebGL текстури є важливими для додання візуальної деталізації та реалізму до 3D-сцен. Хоча базове використання текстур є простим, досягнення оптимальної візуальної якості та продуктивності часто вимагає детального контролю над тим, як текстури вибираються (семплюються). Об'єкти семплерів WebGL забезпечують цей контроль, дозволяючи вам незалежно налаштовувати режими фільтрації та повторення текстур, що призводить до покращеної візуальної точності та потенційно кращої продуктивності.

Що таке об'єкти семплерів?

Об'єкти семплерів — це об'єкти WebGL, які інкапсулюють параметри вибірки текстур, такі як режими фільтрації (збільшення та зменшення) та повторення (як текстури повторюються або обрізаються по краях). До появи об'єктів семплерів ці параметри встановлювалися безпосередньо на самому об'єкті текстури за допомогою gl.texParameteri. Об'єкти семплерів відокремлюють ці параметри вибірки від даних текстури, пропонуючи кілька переваг:

• Чіткість та організація коду: Параметри вибірки групуються в один об'єкт, що робить код легшим для читання та підтримки.
• Повторне використання: Один і той же об'єкт семплера можна використовувати з кількома текстурами, що зменшує надмірність і спрощує внесення змін. Уявіть собі сценарій, де ви хочете мати однакові налаштування міпмапінгу для всіх текстур вашого скайбоксу. З об'єктом семплера вам потрібно змінити налаштування лише в одному місці.
• Оптимізація продуктивності: У деяких випадках драйвери можуть оптимізувати вибірку текстур ефективніше при використанні об'єктів семплерів. Хоча це не гарантовано, це є потенційною перевагою.
• Гнучкість: Різні об'єкти можуть використовувати одну й ту саму текстуру з різними параметрами вибірки. Наприклад, рендеринг ландшафту може використовувати анізотропну фільтрацію для деталей зблизька та трилінійну фільтрацію для віддалених видів, все з однією і тією ж текстурою карти висот, але з різними об'єктами семплерів.

Створення та використання об'єктів семплерів

Створення об'єкта семплера

Створити об'єкт семплера просто за допомогою методу gl.createSampler():

            const sampler = gl.createSampler();

            

              
                Copy
              
            
          

Якщо gl.createSampler() повертає null, браузер, ймовірно, не підтримує розширення. Хоча об'єкти семплерів є частиною WebGL 2, до них можна отримати доступ через розширення EXT_texture_filter_anisotropic у WebGL 1.

Встановлення параметрів семплера

Після того, як ви отримали об'єкт семплера, ви можете налаштувати його режими фільтрації та повторення за допомогою gl.samplerParameteri():

            gl.samplerParameteri(sampler, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.samplerParameteri(sampler, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);

            

              
                Copy
              
            
          

Розглянемо ці параметри детальніше:

• gl.TEXTURE_MIN_FILTER: Визначає, як текстура фільтрується, коли відрендерений об'єкт менший за текстуру. Опції включають:
• gl.NEAREST: Фільтрація за найближчим сусідом (найшвидша, але блочна).
• gl.LINEAR: Білінійна фільтрація (плавніша, ніж за найближчим сусідом).
• gl.NEAREST_MIPMAP_NEAREST: Фільтрація за найближчим сусідом, використовує найближчий рівень міп-карти.
• gl.LINEAR_MIPMAP_NEAREST: Білінійна фільтрація, використовує найближчий рівень міп-карти.
• gl.NEAREST_MIPMAP_LINEAR: Фільтрація за найближчим сусідом, лінійно інтерполює між двома рівнями міп-карт.
• gl.LINEAR_MIPMAP_LINEAR: Трилінійна фільтрація (найплавніший міпмапінг).
• gl.TEXTURE_MAG_FILTER: Визначає, як текстура фільтрується, коли відрендерений об'єкт більший за текстуру. Опції включають:
• gl.NEAREST: Фільтрація за найближчим сусідом.
• gl.LINEAR: Білінійна фільтрація.
• gl.TEXTURE_WRAP_S: Визначає, як текстура повторюється вздовж координати S (U або X). Опції включають:
• gl.REPEAT: Текстура безшовно повторюється. Це корисно для текстур, що замощуються, як-от трава або цегляні стіни. Уявіть текстуру бруківки, накладену на дорогу — gl.REPEAT забезпечить нескінченне повторення бруківки вздовж поверхні дороги.
• gl.MIRRORED_REPEAT: Текстура повторюється, але кожне повторення дзеркально відображається. Це може бути корисним для уникнення швів у певних текстурах. Подумайте про візерунок шпалер, де дзеркальне відображення допомагає згладити краї.
• gl.CLAMP_TO_EDGE: Текстурні координати обрізаються по краю текстури. Це запобігає повторенню текстури і може бути корисним для текстур, які не повинні замощуватися, наприклад, небо або водні поверхні.
• gl.TEXTURE_WRAP_T: Визначає, як текстура повторюється вздовж координати T (V або Y). Опції такі ж, як і для gl.TEXTURE_WRAP_S.

Прив'язка об'єкта семплера

Щоб використовувати об'єкт семплера з текстурою, вам потрібно прив'язати його до текстурного блоку. WebGL має кілька текстурних блоків, що дозволяє використовувати кілька текстур в одному шейдері. Метод gl.bindSampler() прив'язує об'єкт семплера до конкретного текстурного блоку:

            const textureUnit = 0; // Choose a texture unit (0-31 in WebGL2, typically less in WebGL1)
gl.activeTexture(gl.TEXTURE0 + textureUnit); // Activate the texture unit
gl.bindTexture(gl.TEXTURE_2D, texture); // Bind the texture to the active texture unit
gl.bindSampler(textureUnit, sampler); // Bind the sampler to the texture unit

            

              
                Copy
              
            
          

Важливо: Переконайтеся, що ви активували правильний текстурний блок (використовуючи gl.activeTexture) перед прив'язкою як текстури, так і семплера.

Використання семплера в шейдері

У вашому шейдері вам знадобиться uniform-змінна типу sampler2D для доступу до текстури. Вам також потрібно буде вказати текстурний блок, до якого прив'язані текстура та семплер:

            // Vertex Shader
attribute vec2 a_texCoord;
varying vec2 v_texCoord;

void main() {
  v_texCoord = a_texCoord;
  gl_Position = ...; // Your vertex position calculation
}

// Fragment Shader
precision mediump float;
uniform sampler2D u_texture;
varying vec2 v_texCoord;

void main() {
  gl_FragColor = texture2D(u_texture, v_texCoord); // Sample the texture
}

            

              
                Copy
              
            
          

У вашому коді JavaScript встановіть uniform-змінну u_texture на правильний текстурний блок:

            const textureUniformLocation = gl.getUniformLocation(program, "u_texture");
gl.uniform1i(textureUniformLocation, textureUnit); // Set the uniform to the texture unit

            

              
                Copy
              
            
          

Приклад: Фільтрація текстур з міп-картами

Міп-карти (mipmaps) — це попередньо обчислені версії текстури з меншою роздільною здатністю, які використовуються для покращення продуктивності та зменшення аліасингу при рендерингу об'єктів на відстані. Давайте продемонструємо, як налаштувати міпмапінг за допомогою об'єкта семплера.

            // Create a texture
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

// Upload texture data (e.g., from an image)
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

// Generate mipmaps
gl.generateMipmap(gl.TEXTURE_2D);

// Create a sampler object
const sampler = gl.createSampler();

// Configure the sampler for trilinear filtering (best quality)
gl.samplerParameteri(sampler, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.samplerParameteri(sampler, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// Configure wrapping (e.g., repeat)
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_T, gl.REPEAT);

// Bind the texture and sampler
const textureUnit = 0;
gl.activeTexture(gl.TEXTURE0 + textureUnit);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.bindSampler(textureUnit, sampler);

// Set the texture uniform in the shader
const textureUniformLocation = gl.getUniformLocation(program, "u_texture");
gl.uniform1i(textureUniformLocation, textureUnit);

            

              
                Copy
              
            
          

Без міпмапінгу або належної фільтрації віддалені текстури можуть виглядати розмитими або з аліасингом. Трилінійна фільтрація (gl.LINEAR_MIPMAP_LINEAR) забезпечує найплавніші результати, лінійно інтерполюючи між рівнями міп-карт. Обов'язково викличте gl.generateMipmap для текстури після завантаження початкових даних текстури.

Приклад: Анізотропна фільтрація

Анізотропна фільтрація — це техніка фільтрації текстур, яка покращує візуальну якість текстур, що переглядаються під гострими кутами. Вона зменшує розмиття та артефакти, які можуть виникати при стандартному міпмапінгу. Щоб використовувати анізотропну фільтрацію, вам знадобиться розширення EXT_texture_filter_anisotropic.

            // Check for the anisotropic filtering extension
const ext = gl.getExtension('EXT_texture_filter_anisotropic') || gl.getExtension('MOZ_EXT_texture_filter_anisotropic') || gl.getExtension('WEBKIT_EXT_texture_filter_anisotropic');

if (ext) {
  // Get the maximum anisotropy value supported by the hardware
  const maxAnisotropy = gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT);

  // Create a texture
  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);

  // Upload texture data
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

  // Generate mipmaps
  gl.generateMipmap(gl.TEXTURE_2D);

  // Create a sampler object
  const sampler = gl.createSampler();

  // Configure the sampler for trilinear filtering and anisotropic filtering
  gl.samplerParameteri(sampler, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.samplerParameteri(sampler, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.samplerParameterf(sampler, ext.TEXTURE_MAX_ANISOTROPY_EXT, maxAnisotropy); // Use the maximum supported anisotropy

  // Configure wrapping
  gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_T, gl.REPEAT);

  // Bind the texture and sampler
  const textureUnit = 0;
gl.activeTexture(gl.TEXTURE0 + textureUnit);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.bindSampler(textureUnit, sampler);

  // Set the texture uniform in the shader
  const textureUniformLocation = gl.getUniformLocation(program, "u_texture");
gl.uniform1i(textureUniformLocation, textureUnit);
}

            

              
                Copy
              
            
          

У цьому прикладі ми спочатку перевіряємо наявність розширення для анізотропної фільтрації. Потім ми отримуємо максимальне значення анізотропії, що підтримується обладнанням, за допомогою gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT). Нарешті, ми встановлюємо параметр ext.TEXTURE_MAX_ANISOTROPY_EXT для об'єкта семплера за допомогою gl.samplerParameterf.

Анізотропна фільтрація особливо корисна для текстур, застосованих до поверхонь, що переглядаються під гострими кутами, таких як дороги або підлоги, що розглядаються зверху.

Приклад: Прив'язка до краю для скайбоксів

Скайбокси (skyboxes) часто використовують кубічні карти, де шість текстур представляють різні грані навколишнього куба. При вибірці країв скайбоксу, ви зазвичай хочете уникнути повторення текстури. Ось як використовувати gl.CLAMP_TO_EDGE з об'єктом семплера:

            // Assuming you have a cube map texture (cubeTexture)

// Create a sampler object
const sampler = gl.createSampler();

// Configure filtering
gl.samplerParameteri(sampler, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.samplerParameteri(sampler, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// Configure wrapping to clamp to edge
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_R, gl.CLAMP_TO_EDGE); // For cube maps, you also need to clamp the R coordinate

// Bind the texture and sampler
const textureUnit = 0;
gl.activeTexture(gl.TEXTURE0 + textureUnit);
gl.bindTexture(gl.TEXTURE_CUBE_MAP, cubeTexture);
gl.bindSampler(textureUnit, sampler);

// Set the texture uniform in the shader (for a samplerCube uniform)
const textureUniformLocation = gl.getUniformLocation(program, "u_skybox");
gl.uniform1i(textureUniformLocation, textureUnit);

            

              
                Copy
              
            
          

Для кубічних карт ви повинні встановити gl.TEXTURE_WRAP_R, а також gl.TEXTURE_WRAP_S і gl.TEXTURE_WRAP_T. Прив'язка до краю запобігає появі будь-яких швів або артефактів на краях граней кубічної карти.

Особливості WebGL1

Хоча об'єкти семплерів є основною функцією WebGL2, вони доступні у WebGL1 через розширення, такі як EXT_texture_filter_anisotropic. Вам потрібно перевірити наявність та увімкнути розширення перед використанням об'єктів семплерів. Основні принципи залишаються незмінними, але вам потрібно буде працювати з контекстом розширення.

Питання продуктивності

Хоча об'єкти семплерів можуть запропонувати потенційні переваги в продуктивності, важливо враховувати наступне:

• Складність: Використання складних технік фільтрації, таких як анізотропна фільтрація, може бути обчислювально затратним. Профілюйте свій код, щоб переконатися, що ці техніки не впливають негативно на продуктивність, особливо на слабких пристроях.
• Розмір текстури: Більші текстури вимагають більше пам'яті і можуть довше семплюватися. Оптимізуйте розміри текстур, щоб мінімізувати використання пам'яті та покращити продуктивність.
• Міпмапінг: Завжди використовуйте міп-карти при рендерингу об'єктів на відстані. Міпмапінг значно покращує продуктивність і зменшує аліасинг.
• Платформо-специфічні оптимізації: Різні платформи та пристрої можуть мати різні характеристики продуктивності. Експериментуйте з різними режимами фільтрації та повторення, щоб знайти оптимальні налаштування для вашої цільової аудиторії. Наприклад, мобільні пристрої можуть виграти від простіших опцій фільтрації.

Найкращі практики

• Використовуйте об'єкти семплерів для послідовної вибірки: Групуйте пов'язані параметри вибірки в об'єкти семплерів для сприяння повторному використанню коду та зручності підтримки.
• Профілюйте свій код: Використовуйте інструменти профілювання WebGL для виявлення вузьких місць у продуктивності, пов'язаних із вибіркою текстур.
• Вибирайте відповідні режими фільтрації: Вибирайте режими фільтрації, які збалансовують візуальну якість та продуктивність. Трилінійна та анізотропна фільтрації забезпечують найкращу візуальну якість, але можуть бути обчислювально затратними.
• Оптимізуйте розміри текстур: Використовуйте текстури, розмір яких не перевищує необхідний. Текстури зі сторонами, що є степенем двійки (наприклад, 256x256, 512x512), іноді можуть запропонувати кращу продуктивність.
• Враховуйте налаштування користувача: Надайте користувачам можливість налаштовувати фільтрацію текстур та параметри якості для оптимізації продуктивності на їхніх пристроях.
• Обробка помилок: Завжди перевіряйте підтримку розширень та коректно обробляйте помилки. Якщо певне розширення не підтримується, забезпечте резервний механізм.

Висновок

Об'єкти семплерів WebGL надають потужні інструменти для керування режимами фільтрації та повторення текстур. Розуміючи та використовуючи ці техніки, ви можете значно покращити візуальну якість та продуктивність ваших WebGL-застосунків. Незалежно від того, чи розробляєте ви реалістичну 3D-гру, інструмент для візуалізації даних або інтерактивну арт-інсталяцію, оволодіння об'єктами семплерів дозволить вам створювати приголомшливі та ефективні візуальні ефекти. Пам'ятайте, що завжди слід враховувати наслідки для продуктивності та налаштовувати параметри відповідно до конкретних потреб вашого застосунку та цільового обладнання.